<template>
	<view class="main-box">
		<Header :showBack="true" title="商城分类" bgColor="#ace8f6"></Header>
		<view class="box" :style="{'height': 'calc(100vh - ' + statusBarHeight + 'px - 120rpx)' }">
			<view>
				<view  @click="changeIndex(index)" :class="{'active':index==curIndex}" v-for="(item,index) in menuList" :key="index">
					{{item.ctName}}
				</view>
			</view>
			<view>
				<view class="item" @click="toInfo(item.id)" v-for="(item,index) in shopList" :key="index">
					<image :src="baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.prImgUrl" mode="aspectFill" style="border-radius: 13rpx;"></image>
					
					<view>
						<view>{{item.prName}}</view>
						<view>{{item.prDescription?item.prDescription: ""}}</view>
						<view class="shopitem-price">
							<view>￥{{item.prRetailPrice}}</view>
							
							<view class="shop-badge" @click.stop="addShopCar($event,item.id,baseUrl + '/file/api/uploadFile/downloadByKey?id=' + item.prImgUrl)">
								<image src="@/static/gouwuche-baise.png" mode=""></image>
							</view>
						</view>
					</view>
					
				</view>
				
				<view v-show="showQuesheng" class="quesheng">
					<image src="@/static/no-data.png" mode="aspectFill"></image>
					<view >这个商家很懒，还没有上架商品~</view>
				</view>
				
			</view>
		</view>
		
		
		<view @click="toShopCar" class="store-box">
			<image src="@/static/store-badge.png" mode=""></image>
			<view v-if="shopCarNum > 0" >{{shopCarNum}}</view>
		</view>
		
		
		<view class="good_box" v-show="hide_good_box" :style="{left: bus_x+'px',top: bus_y+'px'}">
			<image :src="feiBox"></image>
		</view>
		
		<registPop ref="registPop"></registPop>
		
	</view>
</template>

<script>
	
	import commonMinxi from "@/commom/commonMixin.js"
	import registPop from "@/component/registPop";
	
	var bezier = function(points, times) {
		// 0、以3个控制点为例，点A,B,C,AB上设置点D,BC上设置点E,DE连线上设置点F,则最终的贝塞尔曲线是点F的坐标轨迹。
		// 1、计算相邻控制点间距。
		// 2、根据完成时间,计算每次执行时D在AB方向上移动的距离，E在BC方向上移动的距离。
		// 3、时间每递增100ms，则D,E在指定方向上发生位移, F在DE上的位移则可通过AD/AB = DF/DE得出。
		// 4、根据DE的正余弦值和DE的值计算出F的坐标。
		// 邻控制AB点间距
		var bezier_points = [];
		var points_D = [];
		var points_E = [];
		const DIST_AB = Math.sqrt(Math.pow(points[1]['x'] - points[0]['x'], 2) + Math.pow(points[1]['y'] - points[0][
			'y'
		], 2));
		// 邻控制BC点间距
		const DIST_BC = Math.sqrt(Math.pow(points[2]['x'] - points[1]['x'], 2) + Math.pow(points[2]['y'] - points[1][
			'y'
		], 2));
		// D每次在AB方向上移动的距离
		const EACH_MOVE_AD = DIST_AB / times;
		// E每次在BC方向上移动的距离 
		const EACH_MOVE_BE = DIST_BC / times;
		// 点AB的正切
		const TAN_AB = (points[1]['y'] - points[0]['y']) / (points[1]['x'] - points[0]['x']);
		// 点BC的正切
		const TAN_BC = (points[2]['y'] - points[1]['y']) / (points[2]['x'] - points[1]['x']);
		// 点AB的弧度值
		const RADIUS_AB = Math.atan(TAN_AB);
		// 点BC的弧度值
		const RADIUS_BC = Math.atan(TAN_BC);
		// 每次执行
		for (var i = 1; i <= times; i++) {
			// AD的距离
			var dist_AD = EACH_MOVE_AD * i;
			// BE的距离
			var dist_BE = EACH_MOVE_BE * i;
			// D点的坐标
			var point_D = {};
			point_D['x'] = dist_AD * Math.cos(RADIUS_AB) + points[0]['x'];
			point_D['y'] = dist_AD * Math.sin(RADIUS_AB) + points[0]['y'];
			points_D.push(point_D);
			// E点的坐标
			var point_E = {};
			point_E['x'] = dist_BE * Math.cos(RADIUS_BC) + points[1]['x'];
			point_E['y'] = dist_BE * Math.sin(RADIUS_BC) + points[1]['y'];
			points_E.push(point_E);
			// 此时线段DE的正切值
			var tan_DE = (point_E['y'] - point_D['y']) / (point_E['x'] - point_D['x']);
			// tan_DE的弧度值
			var radius_DE = Math.atan(tan_DE);
			// 地市DE的间距
			var dist_DE = Math.sqrt(Math.pow((point_E['x'] - point_D['x']), 2) + Math.pow((point_E['y'] - point_D[
				'y']), 2));
			// 此时DF的距离
			var dist_DF = (dist_AD / DIST_AB) * dist_DE;
			// 此时DF点的坐标
			var point_F = {};
			point_F['x'] = dist_DF * Math.cos(radius_DE) + point_D['x'];
			point_F['y'] = dist_DF * Math.sin(radius_DE) + point_D['y'];
			bezier_points.push(point_F);
		}
		return {
			'bezier_points': bezier_points
		};
	}
	
	export default {
		data() {
			return {
				menuList: [],
				baseUrl:getApp().globalData.baseUrl,
				statusBarHeight:getApp().globalData.statusBarHeight+44,
				curIndex:0,
				shopList:[],
				showQuesheng:false,
				token: uni.getStorageSync("token"),
				shopCarNum: 0,
				
				//动画 start
				hide_good_box: false,
				feiBox: "",
				bus_x: 0,
				bus_y: 0,
				finger: {
					x: '',
					y: ''
				},
				busPos: {}
				//动画 end
			}
		},
		mixins: [commonMinxi],
		components: {
			registPop
		},
		onShow() {
			this.getShopCarNum();
		},
		onLoad(options) {
			
			this.busPos = {};
			uni.getSystemInfo().then(res => {
				this.busPos['x'] = res[1].windowWidth * .85;
				this.busPos['y'] = res[1].windowHeight * .85;
			})
			
			this.curIndex = options.index
			this.getMenuList();
			
		},
		mounted() {
			
		},
		methods: {
			getMenuList(){
				this.$http('/common/api/commonData/getProductTypeList',{
					 "condition":{
					    "isRoot":true,
							"productTypeFlag":"2",
							//wangk update 2022-0721 
					    }
				},res=>{
					this.menuList = res.data.items
					this.changeIndex(0)
				})
			},
			getShopCarNum(){
				if(this.token){
					this.$http('/common/api/shopingCart/getOwnerList', {}, res => {
						this.shopCarNum =  res.data.items.length;
					})
				}
			},
			addShopCar(e, id, imgUrl){
				
				this.validationLogin({
					success:() => {
						this.addShopCarAnimation(e, id, imgUrl)
						this.$http('/common/api/shopingCart/add',{
							"productId":id,
							"quantity":1
						},res=>{
							this.getShopCarNum()
							uni.$emit("shopCarHandle")
							uni.showToast({
								icon:'none',
								title:'加入购物车成功'
							})
						})
					},
					regist:() => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
				
				//todo
				// this.$http('/common/api/shopingCart/add',{
				// 	"productId":id,
				// 	"quantity":1
				// },res=>{
				// 	this.getShopCarNum()
				// 	uni.$emit("shopCarHandle")
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'加入购物车成功'
				// 	})
				// })
				//todo
				
				
				
			},
			addShopCarAnimation(e, id, imgUrl){
				//把点击每一项的对应的商品图保存下来，就是飞向购物车的图片
				this.feiBox = imgUrl
				// 如果good_box正在运动
				if (this.hide_good_box) return;
				//当前点击位置的x，y坐标
				this.finger = {};
				var topPoint = {};
				
				// #ifdef MP-ALIPAY
				this.finger['x'] = e.detail.clientX;
				this.finger['y'] = e.detail.clientY - 20;
				// #endif
				// #ifdef MP-WEIXIN | H5
				this.finger['x'] = e.touches[0].clientX;
				this.finger['y'] = e.touches[0].clientY - 20;
				// #endif
				
				if (this.finger['y'] < this.busPos['y']) {
					topPoint['y'] = this.finger['y'] - 150;
				} else {
					topPoint['y'] = this.busPos['y'] - 150;
				}
				
				if (this.finger['x'] < this.busPos['x']) {
					topPoint['x'] = Math.abs(this.finger['x'] - this.busPos['x']) / 2 + this.finger['x'];
				
				} else {
					topPoint['x'] = this.busPos['x'];
					this.finger['x'] = this.busPos['x']
				}
				
				this.linePos = bezier([this.finger, topPoint, this.busPos], 30);
				
				this.startAnimation();
			},
			//开始动画
			startAnimation: function() {
				var index = 0,
					that = this,
					bezier_points = that.linePos['bezier_points'];
			
				that.hide_good_box = true,
					that.bus_x = that.finger['x'],
					that.bus_y = that.finger['y']
			
				this.timer = setInterval(function() {
					index++;
			
					that.bus_x = bezier_points[index]['x'],
						that.bus_y = bezier_points[index]['y']
			
					if (index >= 28) {
						clearInterval(that.timer);
						that.hide_good_box = false,
							that.count = that.count += 1
					}
				}, 33);
			},
			getShopList(){
				this.showQuesheng = false
				this.$http('/common/api/commonData/getProductList',{
					"condition":{
					        "tenantId":uni.getStorageSync('tenantId'),
					        "productTypeId":this.menuList[this.curIndex].id,
							"storageMode":3
					    }
				},res=>{
					this.shopList = res.data.items
					if(this.shopList.length==0){
						this.showQuesheng = true
					}
				})
			},
			changeIndex(index){
				this.curIndex = index
				this.getShopList()
			},
			toInfo(id){
				uni.navigateTo({
					url:'/pages/shopMall/shopInfo?id='+ id
				})
			},
			toShopCar(){
				
				this.validationLogin({
					success:() => {
						uni.navigateTo({
							url: "/pages/shopCar/shopCar"
						})
					},
					regist:() => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					},
					scan: () => {
						uni.showToastCallBack({
							icon: "none",
							title: "请先注册哦，注册后获取试喝机会",
							mask: true
						}, () => {
							this.$refs.registPop.open();
						})
					}
				})
			}
			
			
		}
	}
</script>

<style scoped lang="less">

.main-box{
	position: relative;
}	
	
.box{
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 182upx 568upx;
	overflow: hidden;
	margin-top: 20rpx;
	>view:first-child{
		background-color: #F7F8FA;
		height: 100%;
		overflow: auto;
		>view{
			width: 100%;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			font-size: 28upx;
		}
		>view.active{
			position: relative;
			background-color: #FFFFFF;
			font-weight: 600;
			border-radius: 0 40rpx 40rpx 0;
			
			&::after{
				display: inline-block;
				content: "";
				width: 6rpx;
				height: 30rpx;
				border-radius: 3rpx;
				position: absolute;
				left: 20rpx;
				top: 22rpx;
				background-color: red;
			}
		}
	}
	>view:last-child{
		height: 100%;
		overflow: auto;
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		>view.item{
			width: 100%;
			height: 200upx;
			position: relative;
			display: flex;
			justify-content: space-between;
			padding-left: 20upx;
			align-items: center;
			box-sizing: border-box;
			margin-bottom: 20upx;
			border-radius: 13rpx;
			background: #fff;
			>image{
				width: 140upx;
				height: 140upx;
			}
			>view{
				width: 368upx;
				padding: 0 20upx;
				>view:nth-child(1){
					font-size: 28upx;
					height: 50upx;
					line-height: 50upx;
					color: #555555;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				>view:nth-child(2){
					font-size: 20upx;
					height: 70upx;
					line-height: 35upx;
					color: #999999;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;		
					display: -webkit-box;		
					-webkit-line-clamp: 2;	
					line-clamp: 2;					
					-webkit-box-orient: vertical;
				}
				>view:nth-child(3){
					font-size: 32upx;
					height: 60upx;
					line-height: 60upx;
					color: #FF3C3C;
					font-weight: 600;
					margin: 5upx auto;
				}
				.shopitem-price{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.shop-badge{
						
							width: 50rpx;
							height: 50rpx;
							border-radius: 25rpx;
							background-color: #ace8f6;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							image{
								width: 28rpx;
								height: 28rpx;
							}
						
					}
				}
			}
		}
		>.quesheng{
			width: 100%;
			font-size: 26upx;
			color: #999999;
			padding: 50upx 0;
			text-align: center;
			image{
				width: 200rpx;
				height: 200rpx;
				margin-top: 20rpx;
			}
		}
	}
}


	.good_box {
		width: 40px;
		height: 40px;
		position: fixed;
		border-radius: 50%;
		overflow: hidden;
		left: 50%;
		top: 50%;
		z-index: +99;
		border: 1px solid #fff;
		background: rgba(120, 188, 255, 0.2);
	}

	.good_box image {
		display: block;
		width: 100%;
		height: 100%;
	}


	.store-box {
		position: fixed;
		bottom: 180rpx;
		right: 30rpx;
		width: 80rpx;
		height: 80rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
		
		view {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 30rpx;
			height: 30rpx;
			border-radius: 15rpx;
			background-color: #ace8f6;
			font-size: 24rpx;
			color: #fff;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

</style>
